<!--
 ՞˶･֊･˶՞ಣ Author       : Charlie
 ՞˶･֊･˶՞ಣ Date         : 2024-11-28 01:53:09
 ՞˶･֊･˶՞ಣ LastEditors  : Charlie
 ՞˶･֊･˶՞ಣ LastEditTime : 2024-12-01 03:42:46
 ՞˶･֊･˶՞ಣ Description  : 动态漂浮组件
-->
<template>
  <div class="content" :style="styleObj">
    <div v-for="(item, index) in 20" :key="index" class="snow" :style="!isShowOne ? snowStyleObj : {}">
      <img
        v-if="isShowOne"
        src="../../assets/img/start.png"
        alt=""
        style="width: 100%; height: 100%; transition: .3s all"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'VabSnow',
  props: {
    styleObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
    isShowOne: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      snowStyleObj: {
        width: '10px',
        height: '10px',
        backgroundColor: 'white',
        borderRadius: '50%',
        opacity: 0.8,
        boxShadow: '0 0 10px white',
      },
    }
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.content {
  pointer-events: none; // 点击穿透
  position: relative;
  z-index: 9;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  // filter: drop-shadow(0 0 10px white);
  filter: drop-shadow(0 0 10px rgba(221, 222, 217, 0.5));
}

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));

  @return $random_range;
}

.snow {
  $total: 20;
  // $total: 200;
  position: absolute;
  width: 35px;
  height: 35px;
  // background: white;
  // border-radius: 50%;

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    // $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-offset: random_range(-200000, 200000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(60) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(10000) * 0.0001 + 8;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }

      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}
</style>
